<template>
  <div class="home-page">
    
    <van-nav-bar title="首页" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <van-cell-group>
      <!-- <van-cell title="路由跳转" is-link to="index" /> -->
      <van-cell title="跳转商品列表" is-link to="goodsList" />
      <van-cell title="登录页" is-link to="login" />
    </van-cell-group>
    <van-button round type="primary" @click="testApi">测试接口</van-button>
    <van-button round>默认按钮样式</van-button>
    <van-button  type="primary" plain round>朴素按钮</van-button>
    <van-button  type="danger" plain round @click="openSure">弹出确认框</van-button>

    <div class="flex" style="margin-top: 10px;">
      <van-button round>取消</van-button>
      <van-button round type="primary">确认</van-button>
    </div>
    <div style="color: red;line-height: 40px;">
      尽量不要用行内样式，行内样式不支持屏幕自适应！
    </div>

    <div style="margin-top: 10px;">
      <myTag>官方验号</myTag>
      <myTag type="warning">可买包赔</myTag>
    </div>

  </div>
</template>

<script lang="ts" setup>
import myTag from '@/components/my-tag.vue'
import { showToast ,showConfirmDialog} from 'vant'
const onClickLeft = () => history.back()
const onClickRight = () => showToast('按钮')
onMounted(() => {
 
})
onActivated(() => {
  console.log('路由激活')
})
const testApi = async () => {
  const res = await UserService.getGames({})
  console.log('%c Line:33 🍋 res', 'color:#f5ce50', res)
}
const openSure = ()=>{
  showConfirmDialog({
  title: '标题',
  message:
    '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });
}
</script>

<style lang="scss">

</style>
